<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="author" content="Cheresting" />
  <!-- 自动添加dayjs到全局 -->
  <script src="./publicJs/dayjs.min.js"></script>
  <!-- 自动添加vue到全局 -->
  <script src="./publicJs/vue.global.prod.js"></script>
  <!-- 自动添加axios到全局 -->
  <script src="./publicJs/axios.min.js"></script>
  <!-- 自动添加Cookies到全局 -->
  <script src="./publicJs/js.cookie.min.js"></script>
  <!-- 自动添加XLSX到全局 -->
  <script src="./publicJs/xlsx.core.min.js"></script>

  <link rel="stylesheet" href="./publicJs/element-plus.index.css" />
  <!-- 自动添加ElementPlus到全局 -->
  <script src="./publicJs/element-plus.index.full.js"></script>
  <script src="./publicJs/index.iife.min.js"></script>
  <!-- 添加组件到全局 -->
  <script src="./components/production-order-info.js"></script>
  <script src="./components/production-process-info.js"></script>
  <script src="./components/production-bom-info.js"></script>
  <!-- 中文化 -->
  <script src='./publicJs/zh-cn.js'></script>
  <title>dyx模板</title>
</head>

<body>
  <div id="app">
    <el-container style="height: 100%;">
      <el-header style="padding-left: 40px;">
        <el-text class="mx-1" type="primary" size="large" >标题</el-text>
      </el-header>

      <el-container>
        <el-main style="padding-right: 0%;width: 800px;">
  
          <el-table-v2
            v-loading="loading"
            element-loading-text="加载中..."
            :columns="columns"
            :data="tableData"
            :width="780"
            :height="tableHeight"
            fixed
            v-if="tableVersion"
            :row-event-handlers="handleRowClick"
            style="margin-right: 20px;"
          > 
        </el-main>
        <el-main style="padding-left: 0%;">
          <el-table-v2
            v-loading="loading"
            element-loading-text="加载中..."
            
            :columns="columns2"
            :data="tableData2"
            :width="850"
            :height="tableHeight2"
            fixed
            v-if="tableVersion"
            :row-event-handlers="handleRowClick"
            style="margin-left: 20px;"
          />
        </el-main>
          <el-drawer
            v-model="drawer"
            title="I am the title"
            :direction="direction"
            
          >
      </el-container>

      <el-footer style="height: 30px;">

      </el-footer>
    </el-container>

  </div>
</body>
<script type="module">
  import useMyXlsx from './hooks/useMyXlsx.js'
  let myXlsx = useMyXlsx()
  import { showSuccess, showWarning } from './hooks/useMyMessageBox.js'
  import myAxios from './myAxios/myAxios.js'
  const { Share,UploadFilled, Search,Moon, Sunny,Calendar,Warning,CaretTop  } = ElementPlusIconsVue
  const { ElImage, ElLoading,ElTag,ElButton,Loading,  } = ElementPlus

  const { createApp, ref, reactive, computed, h ,onMounted} = Vue
  
 
  const app = createApp({
    name: 'dyxexample',
    setup() {
      const fill=ref(true);
      const tableData = ref([
        {date: '2025-07-01',name: '张三',address: '浙江省宁波市鄞州区新明街道'},
        {date: '2025-08-02',name: '李四',address: '浙江省宁波市北仑区小港街道'},
        {date: '2025-06-03',name: '王五',address: '浙江省宁波市江北区某某街道'},
    
      ]);
      const tableData2 = ref([
        {date: '2025-07-01',name: '张三',address: '浙江省宁波市鄞州区新明街道'},
        {date: '2025-08-02',name: '李四',address: '浙江省宁波市北仑区小港街道'},
        {date: '2025-06-03',name: '王五',address: '浙江省宁波市江北区某某街道'},
        {date: '2025-07-01',name: '张三',address: '浙江省宁波市鄞州区新明街道'},
        {date: '2025-08-02',name: '李四',address: '浙江省宁波市北仑区小港街道'},
        {date: '2025-06-03',name: '王五',address: '浙江省宁波市江北区某某街道'},
        {date: '2025-07-01',name: '张三',address: '浙江省宁波市鄞州区新明街道'},
        {date: '2025-08-02',name: '李四',address: '浙江省宁波市北仑区小港街道'},
        {date: '2025-06-03',name: '王五',address: '浙江省宁波市江北区某某街道'},
        {date: '2025-07-01',name: '张三',address: '浙江省宁波市鄞州区新明街道'},
        {date: '2025-08-02',name: '李四',address: '浙江省宁波市北仑区小港街道'},
        {date: '2025-06-03',name: '王五',address: '浙江省宁波市江北区某某街道'},
        {date: '2025-07-01',name: '张三',address: '浙江省宁波市鄞州区新明街道'},
        {date: '2025-08-02',name: '李四',address: '浙江省宁波市北仑区小港街道'},
        {date: '2025-06-03',name: '王五',address: '浙江省宁波市江北区某某街道'},
        
      ]);
      const columns=ref([
        {Key: 'date',dataKey: 'date',title: '日期',width: 180,align: 'center',},
        {Key: 'name',dataKey: 'name',title: '姓名',width: 180,align: 'center',},
        {Key: 'address',dataKey: 'address',title: '地址',width: 180,align: 'center',},

      ])
      const columns2=ref([
        {Key: 'date',dataKey: 'date',title: '日期',width: 180,align: 'center',},
        {Key: 'name',dataKey: 'name',title: '姓名',width: 180,align: 'center',},
        {Key: 'address',dataKey: 'address',title: '地址',width: 180,align: 'center',},

      ])
      const tableVersion=ref(true);
      
      const loading = ref(false);
      const drawer=ref(false);
      const direction=ref('ltr');
      const HEADER_HEIGHT = 50; 
      const ROW_HEIGHT_ESTIMATE = 50; 
      const MAX_HEIGHT = window.innerHeight - 150; 

      const tableHeight = computed(() => {
        const contentHeight = HEADER_HEIGHT + (tableData.value.length * ROW_HEIGHT_ESTIMATE);
        return Math.min(contentHeight, MAX_HEIGHT);
      });
      const tableHeight2 = computed(() => {
        const contentHeight = HEADER_HEIGHT + (tableData2.value.length * ROW_HEIGHT_ESTIMATE);
        return Math.min(contentHeight, MAX_HEIGHT);
      });
      const handleRowClick = {
        onClick: (event, row) => {
          drawer.value=true;
        },  
        
      };

      let getTableDatas = function () {
        let params = ''
        let name = ''
        myAxios
          .get(name, params, '')
          .then((res) => {
            if (res instanceof Array) {
              
              
              
            } else {
              showWarning('获取数据失败res!' + res)
            }
            
          })
          .catch((err) => {
            
            showWarning('获取数据失败err!' + err)
          })
      }
      
      onMounted(() => {
        
        

      });

      return {
        getTableDatas,
        fill,
        tableHeight,tableHeight2,
        tableData,tableData2,
        columns,columns2,
        loading,
        tableVersion,
        Loading,
        handleRowClick,
        drawer,direction,



      };
    },
  });
  
  // 使用Element Plus
  app.use(ElementPlus, {
    locale: ElementPlusLocaleZhCn,
  })
  app.mount('#app')
</script>
<style>
    /* 基础样式 - 确保布局占满页面 */
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    #app {
      height: 100%;
    }
    .el-container {
      height: 100%;
    }
    :root {
      --menu-bg-color: #b3c0d1;
      --menu-text-color: #050505;
      --menu-active-text-color: #ffd04b;
      --bg-color-page: #f5f5f5;
      --bg-color-aside: #d3dce6;
      --color-aside-text: #333;
      --bg-color-header: #b3c0d1;
      --color-header-text: #333;
      --bg-color-main: #e9eef3;
      --color-main-text: #333;
      --bg-color-footer: #b3c0d1;
      --color-footer-text: #333;
      --bg-color-card: #ffffff;
      --color-text-primary: #000000;
      --color-text-secondary: #606266;
      --el-bg-color-overlay: #fff;
    }
     body {
      background-color: var(--bg-color-page);
      color: var(--color-text-primary);
    }
    .el-aside {
      background-color: var(--bg-color-aside);
      color: var(--color-aside-text);

    }

    .el-header {
      background-color: var(--bg-color-header);
      color: var(--color-header-text);

      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0%;
    }


    .el-main {
      background-color: var(--bg-color-main);
      color: var(--color-main-text);

    }

    .el-footer {
      background-color: var(--bg-color-footer);
      color: var(--color-footer-text);

    }
    .el-table-v2 {
      color: var(--color-text-primary);
 

    }
    .el-table-v2__row {
      color: var(--color-text-primary); 
    }
    .el-table-v2__cell {
      background-color: transparent; 
      color: inherit; 
      border-right: 1px solid #4c4c4c; 
      border-bottom: 1px solid #3a3a3a; 
    }
    .el-table-v2__cell:last-child {
        border-right: none; 
    }
    .el-table-v2__row:hover {
      background-color: #d6d4d4 !important; 
    }
    .el-table-v2::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    .el-drawer{
      background-color: var(--bg-color-main);
    }



</style>

</html>